/*
* xxxx科技有限公司版权所有（）.
* Copyright (c) 2019,  and/or its affiliates. All rights reserved.
* @Date: 2020.08.03 21:52.
* @Author
* @Description  加油站 地址 列表 页面
**/
<template>
  <div class="ca-list pb60">
    <!-- 区域级联 -->
    <header class="ca-area">
      <!-- 省 行政区 查询 -->
      <el-select v-model="provinceValue" placeholder="请选择省" @change="handleProChange" class="ca-sel">
        <el-option v-for="(item, index) in provinceOptions" :key="index" :label="item.name" :value="item.provinceId"></el-option>
      </el-select>
      <!-- 市 行政区 查询 -->
      <el-select v-model="cityValue" placeholder="请选择市" @change="handleCityChange" class="ca-sel">
        <el-option v-for="(item, index) in cityOptions" :key="index" :label="item.name" :value="item.cityId"></el-option>
      </el-select>
      <!-- 县 行政区 查询 -->
      <el-select v-model="countyValue" placeholder="请选择区" @change="handleCountyChange" class="ca-sel">
        <el-option v-for="(item, index) in countyOptions" :key="index" :label="item.name" :value="item.countyId"></el-option>
      </el-select>

      <span class="ca-all" @click="handleAllClick">全部</span>
    </header>
    <!-- 数据 list -->
    <list-data :list="addressData"></list-data>
    <!-- 底部 -->
    <footer-tab flag="list"></footer-tab>
  </div>
</template>

<script>
import urls from '@/api/urls'
import { getData, postData } from '@/api/'
import ListData from '@/components/ListData/' // 列表系列组件
import FooterTab from '@/views/FooterTab/' // 底部组件

export default {
  name: 'AddressList',
  props: {},
  components: { ListData, FooterTab },
  data() {
    return {
      provinceOptions: [], // 省列表
      cityOptions: [], // 市 行政区 查询 
      countyOptions: [], // 县 行政区 查询 

      provinceValue: '', // 省选择值
      cityValue: '', // 市选择值
      countyValue: '', // 县选择值
      stationOption: [], // 获取开启加油站的信息

      addressData: [],

    }
  },
  watch: {},
  mounted() {
  },
  created() {
    window.onpopstate = function () {}
    this.getStation() // 获取开启的加油站 信息
  },
  methods: {
    /**
     *@Description
     *@Return 行政区 - 省 切换事件 查询市.
     **/
    handleProChange(e) {
      console.log('provinceValue-----', e, this.provinceValue)
      this.getAddress(e, 'province')
      this.getCity(e) // 市 查询
    },
    /**
     *@Description
     *@Return 行政区 - 市 切换事件 查询县.
     **/
    handleCityChange(e) {
      console.log(e)
      this.getAddress(e, 'city')
      this.getCounty(e) // 区 查询
    },
    /**
     *@Description
     *@Return 行政区 - 县 切换事件 查询加油站.
     **/
    handleCountyChange(e) {
      this.getAddress(e, 'citProper')
      console.log(e)
    },
    /**
     *@Description
     *@Return 全部按钮 事件监听.
     **/
    handleAllClick() {
      this.provinceValue = '' // 省选择值
      this.cityValue = '' // 市选择值
      this.countyValue = '' // 县选择值
      this.addressData = this.stationOption
      console.log('触发全部按钮this.addressData-----', this.addressData)
    },
    /**
     *@Description
     *@Return 行政区 - 省 数据查询.
     **/
    getProvince() {
      getData({}, urls.provinceUrl).then(res => {
        this.provinceOptions = this.filterData(res.data, 'province')
        console.log('全量省------------', res)
        console.log('过滤之后省------------', this.provinceOptions)
      })
    },
    /**
       *@Description
       *@Return 行政区 - 市 数据查询.
       **/
    getCity(e) {
      getData({ provinceId: e }, urls.cityUrl).then(res => {
        this.cityOptions = this.filterData(res.data, 'city')
        console.log('全量市------------', res)
        console.log('过滤之后市------------', this.cityOptions)
      })
    },
    /**
       *@Description
       *@Return 行政区 - 县 数据查询.
       **/
    getCounty(e) {
      getData({ cityId: e }, urls.countyUrl).then(res => {
        this.countyOptions = this.filterData(res.data, 'citProper')
        console.log('全量区------------', res)
        console.log('过滤之后区------------', this.countyOptions)
      })
    },
    /**
     *@Description
     *@Return 具体加油站 ---- 信息查询.
     **/
    getAddress(id, type) {
      const arr = []

      if (type === 'province') {
        const name = this.provinceOptions.filter(val => { return val.provinceId == id })[0].name
        this.stationOption.forEach(val => {
          if (val.province == name) {
            arr.push(val)
          }
        })
      } else if (type === 'city') {
        const name = this.cityOptions.filter(val => { return val.cityId == id })[0].name
        this.stationOption.forEach(val => {
          if (val.city == name) {
            arr.push(val)
          }
        })
      } else if (type === 'citProper') {
        const name = this.countyOptions.filter(val => { return val.countyId == id })[0].name
        this.stationOption.forEach(val => {
          if (val.citProper == name) {
            arr.push(val)
          }
        })
      }

      this.addressData = arr
    },
    /**
     *@Description
     *@Return 获取开启加油站的数据.
     **/
    getStation() {
      getData({}, urls.stationUrl).then(res => {
        this.stationOption = res.result
        this.addressData = res.result // 全部加油站查询
        this.getProvince() // 省 查询
        console.log('获取开启加油站的数据.=----', this.stationOption)
      })
    },
    /**
     *@Description
     *@Return 过滤开启之后的数据 -- 省、市、区、站.
     **/
    filterData(arrData, type) {
      const arr = []
      if (arrData.length == 0) {
        return []
      } else {
        arrData.forEach(val => {
          this.stationOption && this.stationOption.forEach(item => {
            if (type === 'province' && val.name === item.province) {
              arr.push(val)
            } else if (type === 'city' && val.name === item.city) {
              arr.push(val)
            } else if (type === 'citProper' && val.name === item.citProper) {
              arr.push(val)
            }
          })
        })
        const obj = {};
        return arr.reduce((item, next) => {
          obj[next.name] ? '' : obj[next.name] = true && item.push(next);
          return item;
        }, []);
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ca-list {
  padding-top: 70px;
  margin: 0 auto;
}
.ca-area {
  position: fixed;
  top: 0;
  z-index: 1;
  line-height: 40px;
  padding: 10px 50px 10px 15px;
  overflow: hidden;
  box-sizing: border-box;
  border-top: 1px solid #dcdcdc;
  border-bottom: 2px solid #dddedf;
  background: #fff;
}
/* 区域 */
.ca-sel {
  width: calc(100% / 3);
  float: left;
}
.ca-all {
  position: absolute;
  right: 0;
  padding: 0 10px;
}
// select 边框去除
::v-deep .el-input--suffix .el-input__inner {
  border: none;
  outline: none;
  background: none;
}
.el-select {
  -webkit-tap-highlight-color: transparent !important;
}
</style>
